import React from 'react';
import { FieldNodeSchema } from '@/app/codeTreeSlice';
import cl from 'classnames';
import { Field } from '../../schema/types';
import { fields } from '../fields';
import renderCarouselPost from './renderCarouselPost';
import renderESalesBulletinProd from './renderESalesBulletinProd';
import renderMembershipWidgetProd from './renderMembershipWidgetProd';
import renderSinglePost from './renderSinglePost';
import renderHotNews from './renderHotNews';
import renderGraphicPost from './renderGraphicPost';
import renderCountdownPost from './renderCountdownPost';
import renderFloor from './renderFloor';
import renderTopUp from './renderTopUp';
import renderToolbar from './renderToolbar';
import renderDITOMCCMPost from './renderDITOMCCMPost';
import renderDITOGCPPost from './renderDITOGCPPost';
import renderDITOCountdownPost from './renderDITOCountdownPost';
import renderDITOToolbar from './renderDITOToolbar';
import renderDITORoaming from './renderDITORoaming';
import renderNavigationBar from './renderNavigationBar';
import renderQuickRedemption from './renderQuickRedemption';
import renderInformationBar from './renderInformationBar';
import renderTabCategory from './renderTabCategory';
import renderDITOMultiCountdownPosts from './renderDITOMultiCountdownPosts';
import renderWEBHeader from './renderWEBHeader';
import renderWEBDevices from './renderWEBDevices';
import renderDITOSimRegistration from './renderDITOSimRegistration';
import renderNewToolbar from './renderNewToolbar';
import WalletBalanceProj from './WalletBalanceProj';
import FunctionServiceProd from './FunctionServiceProd';
import PackTypeInfoProj from './PackTypeInfoProj';
import ELoadBalancePto from './ELoadBalancePto';
import JourneyToolbarProd from './JourneyToolbarProd';
import CurrentSubsPlanProd from './CurrentSubsPlanProd';
import renderTmFamilyPlanDetails from './renderTmFamilyPlanDetails';
import renderEnhancedVideos from './renderEnhancedVideos';
import renderDITOSraBanner from './renderDITOSraBanner';
import renderGreetingsToolbar from './renderGreetingsToolbar';
import renderDITOCarouselBanner from './renderDITOCarouselBanner';
import renderCustomizedComponent from './renderCustomizedComponent';
import renderTouristGuide from './renderTouristGuide';
import renderBuyPassModule from './renderBuyPassModule';
import renderJourneyPlanListProd from './renderJourneyPlanListProd';
import JourneyAvailPackListProd from './JourneyAvailPackListProd';
import SubscriptionListProd from './SubscriptionListProd';
import renderMccmPost from './renderMccmPost';
import renderQuickRecharge from './renderQuickRecharge';
import renderDashWeb from './renderDashWeb';
import renderRecentPayments from './renderRecentPayments';
import renderMarketingOfferList from './renderMarketingOfferList';
import renderAppFooter from './renderAppFooter';
import renderAccountBalanceDetailProd from './renderAccountBalanceDetailProd';
import renderRichTextBlockProd from './renderRichTextBlockProd';
import renderFamilyMembersProd from './renderFamilyMembersProd';
import BalanceDashboardWebProd from './BalanceDashboardWebProd';
import renderMutiBalanceDashboardAI from './renderMutiBalanceDashboardAI';
import BillingTrendsWebProd from './BillingTrendsWebProd';
import renderUsageTrendsProd from './renderUsageTrendsProd';
import renderUsageTrendsProd2 from './renderUsageTrendsProd2';

import styles from '../index.less';

export default function renderBasicInfo(
  focusComponent: FieldNodeSchema | undefined,
  keyValues: any[],
  handleChange: (value: any, key: string) => void,
  formatMessage: Function,
  onJump: (value: string, k1: any, k2: any) => void,
  onJourneyJump: (value: string, k1: any, k2: any) => void,
  groupState?: any,
  info?: any,
  ditoSimRef?: any,
) {
  const pictures = focusComponent?.props?.pictures;
  const changedKey = 'pictures';
  const onChange = (value: any, keyName: string) => {
    handleChange(value, keyName);
  };

  // 向下交换
  const handleDownClick = (index: number) => {
    if (index + 1 !== pictures.length) {
      const updateImageList = JSON.parse(JSON.stringify(pictures));
      // 删除这条数据，新增到后面一条
      const currFocusItem = updateImageList[index];
      updateImageList.splice(index, 1);
      updateImageList.splice(index + 1, 0, { ...currFocusItem });
      handleChange(updateImageList, changedKey);
    }
  };

  // 向上交换
  const handleUpClick = (index: number) => {
    if (index !== 0) {
      const updateImageList = JSON.parse(JSON.stringify(pictures));
      // 删除这条数据，新增到后面一条
      const currFocusItem = updateImageList[index];
      updateImageList.splice(index, 1);
      updateImageList.splice(index - 1, 0, { ...currFocusItem });
      handleChange(updateImageList, changedKey);
    }
  };

  const renderField = (item: Field) => {
    const { key, name, type, belongTo, placeholder, maxLength, ...other } = item;
    const value = focusComponent?.props[key];
    const Field = fields[type] as any;
    if (type === 'Switch') {
      const Switch = fields[type];
      return (
        <Switch
          {...other}
          size="small"
          checked={value === 'Y'}
          onChange={(checked: boolean) => handleChange(checked ? 'Y' : 'N', key)}
        />
      );
    }
    return (
      <>
        {Field && (
          <Field
            style={{ width: '100%' }}
            value={value}
            placeHolder={placeholder}
            maxLength={maxLength}
            {...other}
            onChange={(value: any) => onChange(value, key)}
          />
        )}
      </>
    );
  };

  const uploadRender = (keyValues: any[]) => {
    return (keyValues || []).map((item: any, index: number) => {
      const { name, type, rules } = item;
      return (
        <div
          className={cl('mt1-5', {
            mb0: index === 0,
            [styles.fieldSwitchFormItem]: type === 'Switch',
            [styles.fieldRadioFormItem]: ['ImageRadio', 'Radio'].includes(type),
          })}
          key={index}
        >
          <div
            className={cl({
              labelRequired: (rules || []).find((ele: any) => ele.required),
            })}
          >
            {name}
          </div>
          <div className={cl({ mt1: type !== 'Switch' }, styles.updateBox)}>{renderField(item)}</div>
        </div>
      );
    });
  };

  if (focusComponent?.type === 'CarouselPost') {
    return renderCarouselPost(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'SinglePost') {
    return renderSinglePost(focusComponent, handleChange, formatMessage, info);
  }
  if (focusComponent?.type === 'CustomizedComponent') {
    return renderCustomizedComponent(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'HotNews') {
    return renderHotNews(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'GraphicPost') {
    return renderGraphicPost(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'CountdownPost') {
    return renderCountdownPost(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'FloorPoster') {
    return renderFloor(
      keyValues,
      focusComponent,
      handleChange,
      uploadRender,
      handleDownClick,
      handleUpClick,
      formatMessage,
    );
  }
  if (focusComponent?.type === 'TopUp') {
    return renderTopUp(keyValues, focusComponent, uploadRender, handleChange);
  }
  if (focusComponent?.type === 'Toolbar') {
    return renderToolbar(keyValues, focusComponent, uploadRender, handleChange);
  }
  if (focusComponent?.type === 'DITOMCCMCarouselPost') {
    return renderDITOMCCMPost(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'DITOGCPFloorPoster') {
    return renderDITOGCPPost(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'DITOCountdownPost') {
    return renderDITOCountdownPost(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'DITOToolbar') {
    return renderDITOToolbar(focusComponent, handleChange, formatMessage, groupState);
  }
  if (focusComponent?.type === 'DITORoaming') {
    return renderDITORoaming(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'DITOMultiCountdownPosts') {
    return renderDITOMultiCountdownPosts(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'NavigationBar') {
    return renderNavigationBar(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'QuickRedemption') {
    return renderQuickRedemption(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'InformationBar') {
    return renderInformationBar(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'TabCategory') {
    return renderTabCategory(focusComponent, handleChange, info);
  }
  if (focusComponent?.type === 'WEBHeader') {
    return renderWEBHeader(keyValues, focusComponent, uploadRender, handleChange, formatMessage);
  }
  if (focusComponent?.type === 'WEBDevices') {
    return renderWEBDevices(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'DITOSimRegistration') {
    return renderDITOSimRegistration(focusComponent, handleChange, onJump, onJourneyJump, info, ditoSimRef);
  }
  if (focusComponent?.type === 'NewToolbar') {
    return renderNewToolbar(focusComponent, handleChange, formatMessage, ditoSimRef);
  }
  if (focusComponent?.type === 'JourneyToolbarProd') {
    return JourneyToolbarProd(focusComponent, handleChange, formatMessage);
  }
  if (focusComponent?.type === 'WalletBalanceProj') {
    return WalletBalanceProj(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'FunctionServiceProd') {
    return FunctionServiceProd(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'PackTypeInfoProj') {
    return PackTypeInfoProj(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'ELoadBalancePto') {
    return ELoadBalancePto(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'CurrentSubsPlanProd') {
    return CurrentSubsPlanProd(focusComponent, handleChange, formatMessage);
  }
  if (focusComponent?.type === 'TmFamilyPlanDetails') {
    return renderTmFamilyPlanDetails(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'EnhancedVideos') {
    return renderEnhancedVideos(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'DITOSraBanner') {
    return renderDITOSraBanner(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'GreetingsToolbar') {
    return renderGreetingsToolbar(focusComponent, handleChange, formatMessage);
  }
  if (focusComponent?.type === 'DITOCarouselBanner') {
    return renderDITOCarouselBanner(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'TouristGuide') {
    return renderTouristGuide(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'BuyPassModule') {
    return renderBuyPassModule(focusComponent, handleChange, info);
  }
  if (focusComponent?.type === 'JourneyPlanListProd') {
    return renderJourneyPlanListProd(focusComponent, handleChange, info);
  }
  if (focusComponent?.type === 'JourneyAvailPackListProd') {
    return JourneyAvailPackListProd(focusComponent, handleChange, info);
  }
  if (focusComponent?.type === 'SubscriptionListProd') {
    return SubscriptionListProd(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'MarketingBannerProd') {
    return renderMccmPost(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'QuickRecharge') {
    return renderQuickRecharge(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'BalanceDashboardWeb') {
    return renderDashWeb(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'RecentPayments') {
    return renderRecentPayments(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'ESalesBulletinProd') {
    return renderESalesBulletinProd(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'MyRetailSalesProd') {
    return renderESalesBulletinProd(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'ESalesInventoryProd') {
    return renderESalesBulletinProd(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'MonthlyWholesalesAmountProd') {
    return renderESalesBulletinProd(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'MembershipWidgetProd') {
    return renderMembershipWidgetProd(focusComponent, handleChange, ditoSimRef);
  }
  if (focusComponent?.type === 'AppFooterProd') {
    return renderAppFooter(focusComponent, handleChange, ditoSimRef);
  }
  if (focusComponent?.type === 'AccountBalanceDetailProd') {
    return renderAccountBalanceDetailProd(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'RichTextBlockProd') {
    return renderRichTextBlockProd(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'MarketingOfferListProd') {
    return renderMarketingOfferList(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'FamilyMembersProd') {
    return renderFamilyMembersProd(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'MutiBalanceDashboardAI') {
    return renderMutiBalanceDashboardAI(focusComponent, keyValues, handleChange);
  }
  if (focusComponent?.type === 'BalanceDashboardWebProd') {
    return BalanceDashboardWebProd(focusComponent, handleChange, formatMessage, info);
  }
  if (focusComponent?.type === 'BillingTrendsWebProd') {
    return BillingTrendsWebProd(focusComponent, handleChange, formatMessage, info);
  }
  if (focusComponent?.type === 'UsageTrendsProd') {
    return renderUsageTrendsProd(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'UsageTrendsProd2') {
    return renderUsageTrendsProd2(focusComponent, handleChange);
  }
  return <></>;
}
